<template>
    <div class="hello">
        <h3> {{ message }}</h3>
        <ul>
            <li v-for="(item, index) in names.list" :key="index">{{ item }}</li>
        </ul>
        <button @click="clickHandle">按钮</button>
        <p>{{msg}}</p>
        <p>{{message2}}</p>
    </div>
</template>

<script>

import { ref, reactive, onMounted, inject } from "vue"

export default {
    name: 'NewFeature',
    props: {
        msg: String
    },
    //组合式Api
    setup(props,ctx) {
        //比以前有优势，比以前同一个生命周期函数只能存在一个,现在可以存在多个
        onMounted(()=>{
            console.log("生命周期函数:onMounted")
        })
        onMounted(()=>{
            console.log("生命周期函数:onMounted")
        })
        const message2= inject("message");
        //setup 中没有this
        console.log(ctx)
        //ref
        const message = ref("ppppp文本消息")
        //reactive
        const names = reactive({
            list: ["语文", "数学", "英语"]
        })

        function clickHandle() {
            message.value = "新消息"
        }
        
        const msg = props.msg

        return {
            message,
            names,
            clickHandle,
            msg,
            message2
        }
    }



}

</script>
